<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LuxeCart | Premium Curated Shopping</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #1a1a1a;
            --accent-color: #d4af37; /* Gold */
            --accent-hover: #b8962d;
            --text-main: #333333;
            --text-muted: #666666;
            --bg-light: #f8f9fa;
            --white: #ffffff;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
            --shadow-md: 0 10px 25px rgba(0,0,0,0.08);
            --radius: 12px;
        }

        body {
            font-family: 'Inter', sans-serif;
            color: var(--text-main);
            overflow-x: hidden;
            background-color: var(--white);
        }

        h1, h2, h3, .playfair {
            font-family: 'Playfair Display', serif;
            font-weight: 700;
        }

        /* Navbar Styling */
        .navbar {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0,0,0,0.05);
            padding: 1rem 0;
            transition: var(--transition);
        }

        .navbar-brand {
            font-weight: 800;
            font-size: 1.5rem;
            letter-spacing: -1px;
            color: var(--primary-color) !important;
        }

        .navbar-brand span { color: var(--accent-color); }

        /* Hero Section */
        .hero-section {
            position: relative;
            height: 80vh;
            min-height: 500px;
            overflow: hidden;
        }

        .hero-slider, .carousel-inner, .carousel-item {
            height: 100%;
        }

        .carousel-item {
            background-size: cover;
            background-position: center;
            display: flex;
            align-items: center;
        }

        /* Using Gradients for Professional look without external images */
        .slide-1 { background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%); }
        .slide-2 { background: linear-gradient(135deg, #2c3e50 0%, #000000 100%); }
        .slide-3 { background: linear-gradient(135deg, #1e272e 0%, #485460 100%); }

        .carousel-caption {
            text-align: left;
            left: 10%;
            right: 10%;
            bottom: auto;
            top: 50%;
            transform: translateY(-50%);
            max-width: 600px;
        }

        .hero-title {
            font-size: clamp(2.5rem, 6vw, 4rem);
            margin-bottom: 1.5rem;
            line-height: 1.1;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s forwards 0.2s;
        }

        .hero-text {
            font-size: 1.25rem;
            margin-bottom: 2.5rem;
            color: rgba(255,255,255,0.8);
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s forwards 0.4s;
        }

        .btn-gold {
            background-color: var(--accent-color);
            border: none;
            color: white;
            padding: 12px 32px;
            font-weight: 600;
            border-radius: 50px;
            transition: var(--transition);
        }

        .btn-gold:hover {
            background-color: var(--accent-hover);
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
            color: white;
        }

        /* Features Section */
        .section { padding: 80px 0; }

        .feature-box {
            text-align: center;
            padding: 30px;
            border-radius: var(--radius);
            transition: var(--transition);
            background: var(--white);
            border: 1px solid transparent;
        }

        .feature-box:hover {
            border-color: rgba(212, 175, 55, 0.2);
            box-shadow: var(--shadow-md);
        }

        .feature-icon {
            font-size: 2.5rem;
            color: var(--accent-color);
            margin-bottom: 20px;
        }

        /* Stats Section */
        .stats-section {
            background-color: var(--primary-color);
            color: var(--white);
        }

        .stat-number {
            font-size: 3.5rem;
            font-weight: 800;
            color: var(--accent-color);
            display: block;
        }

        .stat-label {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: rgba(255,255,255,0.6);
        }

        /* Category Cards */
        .category-card {
            position: relative;
            height: 350px;
            border-radius: var(--radius);
            overflow: hidden;
            display: block;
            text-decoration: none;
        }

        .category-image {
            width: 100%;
            height: 100%;
            background: #eee;
            transition: transform 0.6s ease;
        }

        .category-card:hover .category-image {
            transform: scale(1.1);
        }

        .category-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.8));
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 30px;
            color: white;
        }

        /* Product Cards */
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }

        .product-card {
            background: var(--white);
            border-radius: var(--radius);
            overflow: hidden;
            transition: var(--transition);
            position: relative;
            border: 1px solid rgba(0,0,0,0.05);
        }

        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-md);
        }

        .product-image-wrapper {
            position: relative;
            aspect-ratio: 1/1;
            background: #f0f0f0;
            overflow: hidden;
        }

        .product-image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .product-badges {
            position: absolute;
            top: 15px;
            left: 15px;
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .badge-custom {
            padding: 5px 12px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
        }

        .badge-sale { background: #e74c3c; color: white; }
        .badge-featured { background: var(--accent-color); color: white; }

        .product-actions {
            position: absolute;
            right: -50px;
            top: 15px;
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .product-card:hover .product-actions { right: 15px; }

        .action-btn {
            width: 40px;
            height: 40px;
            background: var(--white);
            border: none;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }

        .action-btn:hover {
            background: var(--accent-color);
            color: white;
        }

        .product-body { padding: 20px; }

        .product-category {
            font-size: 0.75rem;
            text-transform: uppercase;
            color: var(--text-muted);
            letter-spacing: 1px;
            margin-bottom: 5px;
        }

        .product-title {
            font-size: 1.1rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .product-price {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 700;
            font-size: 1.2rem;
        }

        .old-price {
            text-decoration: line-through;
            color: var(--text-muted);
            font-size: 0.9rem;
            font-weight: 400;
        }

        .current-price { color: var(--primary-color); }

        /* Testimonials */
        .testimonial-card {
            padding: 40px;
            background: var(--bg-light);
            border-radius: var(--radius);
            position: relative;
        }

        .testimonial-card::before {
            content: "\f10d";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 2rem;
            opacity: 0.1;
        }

        /* Newsletter */
        .newsletter-section {
            background: #fdfaf3;
            border-radius: 30px;
            margin: 40px 15px;
            padding: 60px 20px;
        }

        .newsletter-form {
            display: flex;
            max-width: 500px;
            margin: 30px auto 0;
            background: white;
            padding: 8px;
            border-radius: 50px;
            box-shadow: var(--shadow-sm);
        }

        .newsletter-form input {
            border: none;
            padding: 0 20px;
            flex-grow: 1;
            border-radius: 50px;
            outline: none;
        }

        .newsletter-form button {
            background: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 50px;
            font-weight: 600;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .hero-section { height: 60vh; }
            .carousel-caption { text-align: center; left: 5%; right: 5%; }
            .stat-number { font-size: 2.5rem; }
        }
    </style>
</head>
<body>

    <!-- Header / Navbar -->
    <nav class="navbar navbar-expand-lg sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#">LUXE<span>CART</span></a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navContent">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navContent">
                <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Shop</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Categories</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">About</a></li>
                </ul>
                <div class="d-flex align-items-center gap-3">
                    <a href="#" class="text-dark"><i class="fa-solid fa-magnifying-glass"></i></a>
                    <a href="#" class="text-dark"><i class="fa-regular fa-heart"></i></a>
                    <a href="#" class="text-dark position-relative">
                        <i class="fa-solid fa-cart-shopping"></i>
                        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger" style="font-size: 0.6rem;">0</span>
                    </a>
                </div>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section class="hero-section">
        <div id="heroCarousel" class="carousel slide hero-slider" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
            </div>
            <div class="carousel-inner">
                <div class="carousel-item active slide-1">
                    <div class="container position-relative h-100">
                        <div class="carousel-caption">
                            <h1 class="hero-title">Elevate Your Everyday Style</h1>
                            <p class="hero-text">Discover a curated collection of premium essentials designed for the modern lifestyle.</p>
                            <div class="d-flex gap-3">
                                <a href="#" class="btn btn-gold btn-lg">Shop Collection</a>
                                <a href="#" class="btn btn-outline-light btn-lg rounded-pill px-4">Watch Video</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item slide-2">
                    <div class="container position-relative h-100">
                        <div class="carousel-caption">
                            <h1 class="hero-title">Timeless Design, Exceptional Quality</h1>
                            <p class="hero-text">Handcrafted goods that blend traditional craftsmanship with contemporary aesthetics.</p>
                            <a href="#" class="btn btn-gold btn-lg">Explore Quality</a>
                        </div>
                    </div>
                </div>
                <div class="carousel-item slide-3">
                    <div class="container position-relative h-100">
                        <div class="carousel-caption">
                            <h1 class="hero-title">Exclusive Seasonal Arrivals</h1>
                            <p class="hero-text">Limited edition releases that define the season. Get them before they're gone.</p>
                            <a href="#" class="btn btn-gold btn-lg">View New Arrivals</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features -->
    <section class="section">
        <div class="container">
            <div class="row g-4">
                <div class="col-lg-3 col-md-6">
                    <div class="feature-box">
                        <div class="feature-icon"><i class="fa-solid fa-truck-fast"></i></div>
                        <h5>Global Shipping</h5>
                        <p class="text-muted small">Free express delivery on all orders over $150</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="feature-box">
                        <div class="feature-icon"><i class="fa-solid fa-shield-halved"></i></div>
                        <h5>Secure Checkout</h5>
                        <p class="text-muted small">Encrypted payments with 256-bit security</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="feature-box">
                        <div class="feature-icon"><i class="fa-solid fa-arrow-rotate-left"></i></div>
                        <h5>Easy Returns</h5>
                        <p class="text-muted small">30-day hassle-free return and exchange policy</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="feature-box">
                        <div class="feature-icon"><i class="fa-solid fa-medal"></i></div>
                        <h5>Lifetime Warranty</h5>
                        <p class="text-muted small">We stand behind the quality of every product</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="section stats-section">
        <div class="container">
            <div class="row text-center g-5">
                <div class="col-md-4">
                    <span class="stat-number" data-count="1500">0</span>
                    <span class="stat-label">Premium Products</span>
                </div>
                <div class="col-md-4">
                    <span class="stat-number" data-count="45000">0</span>
                    <span class="stat-label">Happy Customers</span>
                </div>
                <div class="col-md-4">
                    <span class="stat-number" data-count="12">0</span>
                    <span class="stat-label">Years of Trust</span>
                </div>
            </div>
        </div>
    </section>

    <!-- Categories -->
    <section class="section">
        <div class="container">
            <div class="d-flex justify-content-between align-items-end mb-5">
                <div>
                    <h2 class="h1">Curated Categories</h2>
                    <p class="text-muted">Explore our handpicked selection of goods</p>
                </div>
                <a href="#" class="text-dark fw-bold text-decoration-none">View All <i class="fa-solid fa-arrow-right-long ms-2"></i></a>
            </div>
            <div class="row g-4">
                <div class="col-md-6 col-lg-3">
                    <a href="#" class="category-card">
                        <div class="category-image" style="background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&q=80&w=600') center/cover;"></div>
                        <div class="category-overlay">
                            <h4 class="mb-1">Tech & Gadgets</h4>
                            <p class="small mb-0">240+ Products</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-6 col-lg-3">
                    <a href="#" class="category-card">
                        <div class="category-image" style="background: url('https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?auto=format&fit=crop&q=80&w=600') center/cover;"></div>
                        <div class="category-overlay">
                            <h4 class="mb-1">Luxury Footwear</h4>
                            <p class="small mb-0">110+ Products</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-6 col-lg-3">
                    <a href="#" class="category-card">
                        <div class="category-image" style="background: url('https://images.unsplash.com/photo-1542291026-7eec264c27ff?auto=format&fit=crop&q=80&w=600') center/cover;"></div>
                        <div class="category-overlay">
                            <h4 class="mb-1">Activewear</h4>
                            <p class="small mb-0">85+ Products</p>
                        </div>
                    </a>
                </div>
                <div class="col-md-6 col-lg-3">
                    <a href="#" class="category-card">
                        <div class="category-image" style="background: url('https://images.unsplash.com/photo-1584917865442-de89df76afd3?auto=format&fit=crop&q=80&w=600') center/cover;"></div>
                        <div class="category-overlay">
                            <h4 class="mb-1">Accessories</h4>
                            <p class="small mb-0">320+ Products</p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Featured Products -->
    <section class="section bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="h1">Featured Arrivals</h2>
                <p class="text-muted">The pieces currently defining our season</p>
            </div>
            <div class="product-grid">
                <!-- Product 1 -->
                <div class="product-card">
                    <div class="product-image-wrapper">
                        <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&q=80&w=600" alt="Watch">
                        <div class="product-badges">
                            <span class="badge-custom badge-sale">Save 20%</span>
                            <span class="badge-custom badge-featured">Best Seller</span>
                        </div>
                        <div class="product-actions">
                            <button class="action-btn"><i class="fa-regular fa-heart"></i></button>
                            <button class="action-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
                        </div>
                    </div>
                    <div class="product-body">
                        <span class="product-category">Timepieces</span>
                        <h5 class="product-title">Minimalist Chronograph</h5>
                        <div class="d-flex align-items-center mb-3">
                            <div class="text-warning me-2" style="font-size: 0.8rem;">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star-half-stroke"></i>
                            </div>
                            <span class="small text-muted">(48 reviews)</span>
                        </div>
                        <div class="product-price">
                            <span class="old-price">$249.00</span>
                            <span class="current-price">$199.00</span>
                        </div>
                    </div>
                    <div class="p-3 pt-0">
                        <button class="btn btn-dark w-100 rounded-pill py-2">Add to Cart</button>
                    </div>
                </div>

                <!-- Product 2 -->
                <div class="product-card">
                    <div class="product-image-wrapper">
                        <img src="https://images.unsplash.com/photo-1583394838336-acd977736f90?auto=format&fit=crop&q=80&w=600" alt="Headphones">
                        <div class="product-actions">
                            <button class="action-btn"><i class="fa-regular fa-heart"></i></button>
                            <button class="action-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
                        </div>
                    </div>
                    <div class="product-body">
                        <span class="product-category">Audio</span>
                        <h5 class="product-title">Pro-Studio Headphones</h5>
                        <div class="d-flex align-items-center mb-3">
                            <div class="text-warning me-2" style="font-size: 0.8rem;">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                            </div>
                            <span class="small text-muted">(124 reviews)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$349.00</span>
                        </div>
                    </div>
                    <div class="p-3 pt-0">
                        <button class="btn btn-dark w-100 rounded-pill py-2">Add to Cart</button>
                    </div>
                </div>

                <!-- Product 3 -->
                <div class="product-card">
                    <div class="product-image-wrapper">
                        <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?auto=format&fit=crop&q=80&w=600" alt="Speaker">
                        <div class="product-actions">
                            <button class="action-btn"><i class="fa-regular fa-heart"></i></button>
                            <button class="action-btn"><i class="fa-solid fa-magnifying-glass"></i></button>
                        </div>
                    </div>
                    <div class="product-body">
                        <span class="product-category">Smart Home</span>
                        <h5 class="product-title">Acoustic Smart Speaker</h5>
                        <div class="d-flex align-items-center mb-3">
                            <div class="text-warning me-2" style="font-size: 0.8rem;">
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-solid fa-star"></i>
                                <i class="fa-regular fa-star"></i>
                            </div>
                            <span class="small text-muted">(32 reviews)</span>
                        </div>
                        <div class="product-price">
                            <span class="current-price">$129.00</span>
                        </div>
                    </div>
                    <div class="p-3 pt-0">
                        <button class="btn btn-dark w-100 rounded-pill py-2">Add to Cart</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="section">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-4">
                    <div class="testimonial-card">
                        <div class="text-warning mb-3">
                            <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                        </div>
                        <p class="mb-4">"The quality of the products is unmatched. I've been a regular customer for 2 years and every purchase feels like an investment in style."</p>
                        <div class="d-flex align-items-center">
                            <div class="bg-dark text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 45px; height: 45px;">JD</div>
                            <div>
                                <h6 class="mb-0 fw-bold">Johnathan Doe</h6>
                                <p class="small text-muted mb-0">Verified Buyer</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="testimonial-card">
                        <div class="text-warning mb-3">
                            <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                        </div>
                        <p class="mb-4">"Shipping was incredibly fast. I received my order in London within 48 hours. The packaging itself was a work of art."</p>
                        <div class="d-flex align-items-center">
                            <div class="bg-dark text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 45px; height: 45px;">SM</div>
                            <div>
                                <h6 class="mb-0 fw-bold">Sarah Mitchell</h6>
                                <p class="small text-muted mb-0">Creative Director</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="testimonial-card">
                        <div class="text-warning mb-3">
                            <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i>
                        </div>
                        <p class="mb-4">"Exceptional customer service. Had a minor issue with sizing and it was resolved in minutes. Highly recommended!"</p>
                        <div class="d-flex align-items-center">
                            <div class="bg-dark text-white rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 45px; height: 45px;">MR</div>
                            <div>
                                <h6 class="mb-0 fw-bold">Marcus Reed</h6>
                                <p class="small text-muted mb-0">Entrepreneur</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Newsletter -->
    <section class="container">
        <div class="newsletter-section text-center">
            <h2 class="h1 mb-3">Join the Luxe Circle</h2>
            <p class="text-muted mb-4">Subscribe to receive first access to new collections and exclusive member-only offers.</p>
            <form class="newsletter-form">
                <input type="email" placeholder="Enter your email address" required>
                <button type="submit">Subscribe</button>
            </form>
            <p class="small text-muted mt-4">By subscribing, you agree to our Terms of Service and Privacy Policy.</p>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-dark text-white py-5">
        <div class="container">
            <div class="row g-5">
                <div class="col-lg-4">
                    <h5 class="mb-4 text-white">LUXECART</h5>
                    <p class="text-muted">A destination for those who value craftsmanship, design, and quality. Redefining modern luxury shopping since 2012.</p>
                    <div class="d-flex gap-3 mt-4">
                        <a href="#" class="text-white opacity-50"><i class="fa-brands fa-instagram"></i></a>
                        <a href="#" class="text-white opacity-50"><i class="fa-brands fa-facebook"></i></a>
                        <a href="#" class="text-white opacity-50"><i class="fa-brands fa-twitter"></i></a>
                    </div>
                </div>
                <div class="col-6 col-lg-2">
                    <h6 class="text-white mb-4">Shop</h6>
                    <ul class="list-unstyled text-muted small">
                        <li class="mb-2"><a href="#" class="text-decoration-none text-muted">All Products</a></li>
                        <li class="mb-2"><a href="#" class="text-decoration-none text-muted">New Arrivals</a></li>
                        <li class="mb-2"><a href="#" class="text-decoration-none text-muted">Featured</a></li>
                        <li class="mb-2"><a href="#" class="text-decoration-none text-muted">Sale</a></li>
                    </ul>
                </div>
                <div class="col-6 col-lg-2">
                    <h6 class="text-white mb-4">Support</h6>
                    <ul class="list-unstyled text-muted small">
                        <li class="mb-2"><a href="#" class="text-decoration-none text-muted">Order Tracking</a></li>
                        <li class="mb-2"><a href="#" class="text-decoration-none text-muted">Shipping Info</a></li>
                        <li class="mb-2"><a href="#" class="text-decoration-none text-muted">Returns</a></li>
                        <li class="mb-2"><a href="#" class="text-decoration-none text-muted">Contact Us</a></li>
                    </ul>
                </div>
                <div class="col-lg-4">
                    <h6 class="text-white mb-4">Visit Us</h6>
                    <p class="text-muted small mb-1">123 Design District, New York, NY 10001</p>
                    <p class="text-muted small">Email: support@luxecart.com</p>
                </div>
            </div>
            <hr class="my-5 opacity-10">
            <div class="text-center text-muted small">
                <p>&copy; 2024 LuxeCart Premium. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Number counting animation
        const stats = document.querySelectorAll('.stat-number');
        const observerOptions = {
            threshold: 0.5
        };

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const target = parseInt(entry.target.getAttribute('data-count'));
                    let count = 0;
                    const increment = target / 50;
                    const updateCount = () => {
                        if (count < target) {
                            count += increment;
                            entry.target.innerText = Math.ceil(count).toLocaleString();
                            setTimeout(updateCount, 20);
                        } else {
                            entry.target.innerText = target.toLocaleString() + '+';
                        }
                    };
                    updateCount();
                    observer.unobserve(entry.target);
                }
            });
        }, observerOptions);

        stats.forEach(stat => observer.observe(stat));

        // Sticky Header scroll effect
        window.addEventListener('scroll', () => {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('shadow-sm');
                navbar.style.padding = '0.5rem 0';
            } else {
                navbar.classList.remove('shadow-sm');
                navbar.style.padding = '1rem 0';
            }
        });
    </script>
</body>
</html>